﻿<%@ Page Title="" Language="C#" MasterPageFile="~/PIMMobile.master" AutoEventWireup="true" CodeFile="AllRecipe.aspx.cs" Inherits="AllRecipe" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.theme.css" />
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.all.css" />
    <script src="Scripts/jquery.slimscroll.js" language="javascript" type="text/javascript"></script>
     
<script type="text/javascript">

    function loadRecipes() {

        $.ajax({
            type: "POST",
            url: "PIMServices.asmx/GetRecipeUser",
            data: "{'UserId':'0'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                BindRecipe(response);
            },
            error: function (msg) { alert('Connect to database is break. Please check connection info!'); }
        });

    }

    function SearchRecipe() {

        $('.btn_search').click(function () {

            $.ajax({
                type: "POST",
                url: "PIMServices.asmx/GetRecipeUserByName",
                data: "{'RecipeName':'" + $("#inPutSearch").val() + "','UserId':'0'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindRecipe(response);
                },
                error: function (msg) { alert('Connect to database is break. Please check connection info!'); }
            });
        });
    }

    function AddMyMyRecipe(RecipeId, UserId, OldUser) {
        $("#gallery li#" + RecipeId).remove(); 
        document.getElementById("<%=GroceryRecipe.ClientID %>").value += "," + RecipeId;
//        $.ajax({
//            type: "POST",
//            url: "PIMServices.asmx/InsertMyRecipe",
//            data: "{'_recipeId':'" + RecipeId + "','_userId':'" + UserId + "','_oldUser':'" + OldUser + "'}",
//            contentType: "application/json; charset=utf-8",
//            dataType: "json",
//            success: function (response) {
//                result = response.d;
//                if (result == "OK") {
//                    //                         alert('Add to My recipe is success!');
//                }
//                else {
//                    //                         alert('This recipe is exists with user ' + UserId + '!');
//                }
//            },
//            error: function (msg) { alert('Connect to database is break. Please check connection info!'); }
//        });


    }
    function AddMyMealPlan(RecipeId, UserId, OldUser) {
        $("#gallery li#" + RecipeId).remove();
        document.getElementById("<%=MealPlanRecipe.ClientID %>").value += "," + RecipeId;
    }

    function BindRecipe(response) {
        var userid = '<%=Session["Userid"]%>';
        var recipe = response.d;
        //alert(recipe);
        var html = "";
        for (var i = 0; i < recipe.length; i++) {
            var varObjectID = recipe[i].RecipeID;
            var OldUser = recipe[i].UserID;
            var varObjectName;
            var varObjectNameFull;
            if (recipe[i].RecipeName != null) {
                varObjectName = recipe[i].RecipeName.substring(0, 10);

                varObjectNameFull = recipe[i].RecipeName;
                if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
            }
            else {
                varObjectName = 'No Name..';
                varObjectNameFull = 'No Name';
            }
            var varObjectImage = recipe[i].RecipeImage;
            var varUserName = recipe[i].UserName;
            var rating = recipe[i].RecipeRating;
            var serving = recipe[i].Serving;
            rating = "'" + rating + "'";

            if (varObjectImage != null) {
                html += '<li id="' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image" >'
                html += '<a id="' + varObjectID + ' " class="none-decoration" href="Recipe.aspx?RecipeId=' + varObjectID + '">' + varObjectName + '</a>';
                html += '<img class="tooltip" id="' + varObjectID + '" height="72" width="88" alt="' + varObjectNameFull + '" serving="' + 1000 + '" src="data:image/jpeg;charset=utf-8;base64,' + varObjectImage + '" style="display: inline-block; height: 72px;" title="<b>Description: </b>' + varObjectNameFull + '</br><b>Author: </b>' + varUserName + '</br><div class=basic data-average=' + rating + ' data-id=1></div>" onclick="ViewRecipeFullView(' + varObjectID + ')">';
                //html += '<p>';
                if (userid != '') {
                    html += '<a onclick="javascript:AddMyMealPlan(' + varObjectID + ',' + userid + ',' + OldUser + ')" title="Add to meal plan" class="ui-icon ui-icon-plus" style="float:right"></a>';
                    html += '<a onclick="javascript:AddMyMyRecipe(' + varObjectID + ',' + userid + ',' + OldUser + ')" title="Add to my recipe" class="ui-icon ui-icon-star" style="float:right"></a>';
//                                             html += '<a onclick="javascript:AddMyMyRecipe(' + varObjectID + ',' + userid + ',' + OldUser + ')" title="Add to my recipe" style="float:right"><img src="images/favorites.jpg" width="10" height="10"></img></a>';
                }
                //html += '</p>';
                html += '</li>'
            }
        }
        $('#gallery').html(html);
        //init_tooltip();

    }

    function ViewRecipeFullView(recipeToView) {
        self.location = "Recipe.aspx?RecipeId=" + recipeToView + "";
    }

    window.onclick = function () {
        if ($('#vpb_login_pop_up_box').css('display') != 'none') {
            //alert('abc');
            //

        }
    }

    $(document).ready(function () {
        $('#primary-main').slimscroll({
            size: '15px'
        });
        loadRecipes();
        //BindSuggestion();
        SearchRecipe();

    });
</script>
<script type="text/javascript">
        
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div class="search-head" style="">
    <div class="search_bg" >
            <div class="txt_box">
                <input name="searchrecipes" id="inPutSearch" class="textInputs" type="text" onfocus="javascript: if(this.value == 'Search Recipes'){ this.value = ''; }" onblur="javascript: if(this.value==''){this.value='Search Recipes';}" value="Search Recipes" size="22"></div>
            <div class="btn_search" style="height:18px">
                <img src="images/btn_search.jpg" alt="" width="23" height="18"></div>
    </div>
    <%--<div class="row-image">
        <img src="images/recipe.jpg"/>
    </div>--%>
    <div class="row-image">
        <asp:ImageButton ID="BtnGroceryList" runat="server" 
            ImageUrl="~/images/img01.jpg" CssClass="img-icon" onclick="BtnGroceryList_Click"/>
    </div>
    <div class="row-image">
        <asp:ImageButton ID="ImageButton1" runat="server" 
            ImageUrl="~/images/recipe.jpg" CssClass="img-icon" onclick="BtnMealPlanList_Click"/>
    </div>
    
    <div style="clear:both"></div>
    </div>
    <div id="primary-main">
    <div id="primary-nav">
        <ul id="gallery">
        </ul>
        <input id="inputRecipeId" type="hidden" />
        
        <asp:HiddenField id="GroceryRecipe" runat="server"/>
    </div>
    </div>
<div style="clear:both"></div>
<asp:HiddenField id="MealPlanRecipe" runat="server"/>
</asp:Content>

